<template>
	<view class="goods-list">
		<view  v-for="(item,i) in goodsList" :key="i" @click="gotoDetail(item.goods_id)"> 
      <my-goods :goods="item"></my-goods>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
         // 请求参数对象
          queryObj:{
            query:'', //查询关键词
            cid: '', //分类ID
            pagenum: 1, //页数索引
            pagesize: 10 //每页长度
          },
          // 商品列表数据
          goodsList:[],
          total: 0, // 总数据
          isLoading: false //节流阀控制上拉触底
			};
		},
    
    onLoad(options) {
      // 将页面跳转时携带的参数，转存到 queryObj 对象
      console.log(options)
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      this.getGoodsList()
    },
   
    methods:{
      // 获取商品列表数据的方法
      async getGoodsList(cb){
        // 请求数据打开节流阀
        this.isLoading = true
         const {data:res} =await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
         
         // 关闭节流阀
         this.isLoading = false
          // 只要数据请求完毕，就立即按需调用 cb 回调函数
         cb && cb()
         if(res.meta.status !==200) return uni.$showMsg()
         
         this.goodsList = [...this.goodsList, ...res.message.goods]
         
         this.total = res.message.total
         console.log(res)
       },
       // 跳转到详情页
       gotoDetail(goods_id) {
         uni.navigateTo({
           url:'/subpkg/goods_detail/goods_detail?goods_id='+ goods_id
         })
       }
    },
    
    // 上拉触底事件
    onReachBottom() {
      // 判断数据是否加载完毕
      if(this.queryObj.pagenum * this.queryObj.pagesize >=this.total) return uni.$showMsg('数据加载完毕!')
      
      // 请求数据中直接返回
      if(this.isLoading) return
      this.queryObj.pagenum++
      this.getGoodsList()
    },
    
    // 下拉刷新
    onPullDownRefresh() {
      // 重置数据
      this.goodsList = []
      this.total = 0
      this.isLoading= false
      this.queryObj.pagenum = 1
      
      // 重新获取数据
      this.getGoodsList(()=>{uni.stopPullDownRefresh()})
    }
	}
</script>

<style lang="scss">
.goods-list {
  
}
</style>
